import { View, Text, Image, ScrollView } from "@tarojs/components";

import Taro from "@tarojs/taro";
import "./index.less";
import navImg from "../../public/nav.png";
import scrollBar from "../../public/scrollBar.jpeg";
import { getIndexList } from "../../util/services";
import { useEffect, useState } from "react";

const Index = () => {
  const [detail, setDetail] = useState();
  useEffect(() => {
    setDetail(getIndexList());
  }, []);
  return (
    <View className="index">
      <View className="nav">
        <View className="left-icon">
          <i className="iconfont icon-menu1"></i>
        </View>
        <Image src={navImg} className="img" />
        <View className="right-icon">
          <i className="iconfont icon-user1"></i>
        </View>
      </View>
      <Image src={scrollBar} className="wiper"></Image>

      <View>
        <NovelItem detail={detail} label={"主编力荐"}></NovelItem>
      </View>
      <View>
        <NovelItem detail={detail} label={"本周推荐"}></NovelItem>
      </View>
      <View>
        <NovelItem detail={detail} label={"男频精选"}></NovelItem>
      </View>
      <View>
        <NovelItem detail={detail} label={"女频精选"}></NovelItem>
      </View>
      <View
        style={{
          height: "80px",
          textAlign: "center",
          lineHeight: "80px",
          fontSize: "14px",
          color: "#333",
        }}
      >
        <Text>© 2019 北京时光荏苒科技有限公司</Text>
      </View>
    </View>
  );
};

const NovelItem = ({ detail, label }) => {
  const detailList = detail || [];
  return (
    <>
      <View className="novel-item">
        <View className="title">
          <Text>{label}</Text>
        </View>
        <View className="item-view">
          <ScrollView
            className="item-list"
            scrollX
            scrollWithAnimation
            style={{ whiteSpace: "nowrap" }}
          >
            {detailList.map((item, index) => (
              <View key={index} className="item-view">
                <View
                  className="item"
                  onClick={() => {
                    Taro.navigateTo({ url: "/pages/detail/index" });
                  }}
                >
                  <Image
                    src={
                      "https://p3-tt.byteimg.com/img/" +
                      item.thumbUri +
                      "~152x214.jpg"
                    }
                    className="img"
                  />
                  <Text className="label">{item.bookName}</Text>
                </View>
              </View>
            ))}
          </ScrollView>
        </View>
      </View>
    </>
  );
};
export default Index;
